
<template>
  <div>
    <van-nav-bar
      title="蔬菜菌类"
      left-text="返回"
      left-arrow
      @click="onClickLeft"
    />


    <div>
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>

   <div class="c1">
        <dl>
            <dt>
                <img src="../../assets/c1.png" />
            </dt>
            <dd>
                <p>黄豆芽 豆芽，大豆芽，清水豆芽</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c2">
        <dl>
            <dt>
                <img src="../../assets/c2.png" />
            </dt>
            <dd>
                <p>金针菇 构菌，朴菇，冬菇</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c3">
        <dl>
            <dt>
                <img src="../../assets/c3.png" />
            </dt>
            <dd>
                <p>黄瓜 胡瓜，王瓜，刺瓜</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c4">
        <dl>
            <dt>
                <img src="../../assets/c4.png" />
            </dt>
            <dd>
                <p>土豆 马铃薯，洋芋，地蛋，山药蛋，洋蛋</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c5">
        <dl>
            <dt>
                <img src="../../assets/c5.png" />
            </dt>
            <dd>
                <p>大白菜 白菜，胶菜，绍菜，蔗菜</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c6">
        <dl>
            <dt>
                <img src="../../assets/c6.png" />
            </dt>
            <dd>
                <p>娃娃菜</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c7">
        <dl>
            <dt>
                <img src="../../assets/c7.png" />
            </dt>
            <dd>
                <p>腭瓜 腭子，扁蒲，葫芦，夜开花</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c8">
        <dl>
            <dt>
                <img src="../../assets/c8.png" />
            </dt>
            <dd>
                <p>黄豆芽 豆芽，大豆芽，清水豆芽</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c9">
        <dl>
            <dt>
                <img src="../../assets/c9.png" />
            </dt>
            <dd>
                <p>黄豆芽 豆芽，大豆芽，清水豆芽</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    </div>
</template>

<script setup lang='ts'>

import { ref } from 'vue'
 const value = ref('');


const onClickLeft = () => history.back()

</script>

<style lang="scss" scoped>

.c1{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c2{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c3{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c4{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c5{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c6{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c7{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c8{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c9{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
</style>
